<template>
  <div class="main">
    <Navbar :title="title" />
    <div class="content">
      <van-pull-refresh
        v-model="isLoading"
        @refresh="onRefresh"
        pulling-text=" "
      >
        <template #pulling>
          <van-icon class="reotate" name="down" />
        </template>
        <template #loosing>
          <van-icon
            class="reotate"
            name="down"
            :style="{ transform: `rotate(180deg)` }"
          />
        </template>
        <template #loading>
          <van-loading type="spinner" size="24px" />
        </template>

        <div class="map">
          <div class="weather">
            <img
              src="http://10.31.169.37:3000/images/%E9%A6%96%E9%A1%B5%EF%BC%88%E4%B8%80%E7%BA%A7%EF%BC%89_slices/%E5%A4%9A%E4%BA%91.png"
              alt="多云"
            />
          </div>
          <div class="weather-index">
            <div class="con ft-style">
              <p>今天的保湿和防晒指数, 点我一下就告诉你</p>
              <p class="add ft-style">
                <span v-if="map"></span>{{ map ? "" : "需要允许位置权限哦" }}
              </p>
            </div>
          </div>
          <div class="arrows">
            <img
              src="http://10.31.169.37:3000/images/%E9%A6%96%E9%A1%B5%EF%BC%88%E4%B8%80%E7%BA%A7%EF%BC%89_slices/j%E7%AE%AD%E5%A4%B4.png"
              alt=""
            />
          </div>
        </div>
        <div class="cat_prolist">
          <div class="cat">
            <div class="left" v-html="str2">
              <!-- <button @click="adopt">点击领养</button> -->
            </div>
            <div class="right">
              <img
                src="http://10.31.169.37:3000/images/%E9%A6%96%E9%A1%B5%EF%BC%88%E4%B8%80%E7%BA%A7%EF%BC%89_slices/%E5%8D%A1%E9%80%9A.png"
                alt="卡通"
              />
            </div>
          </div>
          <div class="prolist">
            <ul>
              <li
                v-for="item in indexlist"
                :key="item.tit"
                @click="to(item.path)"
              >
                <div class="img"><img :src="item.imgUrl" alt="" /></div>
                <span>{{ item.tit }}</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="articlelist">
          <!-- 文章列表 -->
          <!-- 文章列表每一项 -->
          <div class="article recommend">
            <div class="articleitems" v-for="item in recommend" :key="item.nm">
              <!--文章具体内容 -->
              <!-- 文章大图片 -->
              <div class="img">
                <img :src="item.img" alt="" />
              </div>
              <!-- 文章内容 -->
              <p>{{ item.article }}</p>
              <!-- 文章标题 -->
              <h2>{{ item.atit }}</h2>
              <!-- 个人信息 -->
              <Mine :item="item" />
              <!-- <Mine /> -->
            </div>
          </div>
          <div class="banner"></div>
          <div class="article unrecommend">
            <div
              class="articleitems"
              v-for="item in unrecommend"
              :key="item.nm"
            >
              <!--文章具体内容 -->
              <!-- 文章大图片 -->
              <div class="img">
                <img v-lazy="item.img" alt="" />
              </div>
              <!-- 文章内容 -->
              <p>{{ item.article }}</p>
              <!-- 文章标题 -->
              <h2>{{ item.atit }}</h2>
              <!-- 个人信息 -->
              <Mine :item="item" />
            </div>
          </div>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import Navbar from "../Navbar";
import { mapActions, mapState, mapGetters } from "vuex";
import { PullRefresh, Loading, Icon } from "vant";
import Mine from "./Ranking/product/mine.vue";
export default {
  data() {
    return {
      //title 标题
      title: "首页",
      //是否有权限
      map: false,
      //首页的按钮列表
      count: 0,
      isLoading: false,
      timer: 0,
      i: 0,
      str: "你需要一只~ ฅ(≧∇≦)ฅ <br>能测肤、懂护肤、还会撒娇的智能助理喵吗?<br>那就快领养我吧!",
      str2: "",
    };
  },
  computed: {
    //首页的按钮列表
    // ...mapState({
    //   indexlist: (state) => state.indexlist,
    // }),
    ...mapState(["indexlist", "articlelist"]),
    ...mapGetters(["recommend", "unrecommend"]),
  },
  activated() {},
  watch: {},
  created() {},
  mounted() {
    this.Getindexlistasync();
    this.Getindexartasync();
    this.show();
  },
  methods: {
    //点击领养按钮
    adopt() {},
    ...mapActions(["Getindexlistasync", "Getindexartasync"]),
    to(val) {
      this.$router.push(val);
    },
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
        this.count++;
      }, 1000);
    },
    show() {
      //领养猫的文字 键入动画
      if (this.i <= this.str.length) {
        this.str2 = this.str.slice(0, this.i++);
        this.timer = setTimeout(() => {
          this.show();
        }, 100);
      } else {
        clearTimeout(this.timer);
      }
    },
  },
  components: {
    VanPullRefresh: PullRefresh,
    VanLoading: Loading,
    VanIcon: Icon,
    Navbar,
    Mine,
  },
};
</script>
<style lang="less">
@import "../../assets/css/var";
.main {
  .van-pull-refresh__track {
    //min-height: 100vh !important;
    .van-pull-refresh__head {
      .reotate {
        transition: 0.2s;
      }
    }
  }
  .content {
    //自定义的内容范围
    .content();
    padding: 0 15px;
    background: #fff;
    .map {
      //获取定位以及天气的盒子
      margin: 0 0 @xl-font;
      height: 52px;
      display: flex;
      justify-content: center;
      align-items: center;
      .weather {
        //天气的图标
        display: flex;
        justify-items: center;
        width: 45px;
        height: 39px;
        img {
          width: 100%;
        }
      }
      .weather-index {
        //
        margin: 0 @xl-font;
        font: @xs-font;
        line-height: @xl-font;

        .ft-style {
          font-size: 12px;
          color: @ts-color;
        }
        .add {
          color: #b5b5b5;
        }
      }
      .arrows {
        //箭头盒子
        display: flex;
        justify-items: center;
        width: 26px;
        height: @m-font;
        img {
          width: 100%;
        }
      }
    }
    .cat_prolist {
      //领养猫和排行榜列表
      .cat {
        //领养猫的盒子
        display: flex;
        justify-content: space-between;
        .left {
          width: 224px;
          height: 128px;
          font-size: @xs-font;
          padding: @xxs-font @xl-font;
          color: #717171;
          line-height: @m-font;
          background: url("http://10.31.169.37:3000/images/index/btn.png")
            no-repeat center center/100%;
        }
        .right {
          width: 122px;
          height: 133px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .prolist {
        //排行榜列表
        ul {
          display: flex;
          justify-content: center;
          li {
            width: 73px;
            display: flex;
            flex-direction: column;
            align-items: center;
            img {
              width: 100%;
            }
            span {
              font-size: @xs-font;
              .fontstyle();
              color: #717171;
            }
          }
        }
      }
    }
    .articlelist {
      //文章列表
      .article {
        //文章列表每一项
        .articleitems {
          margin-top: 40px;
          border-bottom: 1px solid #f1f1f1;
          .img {
            //文章大图片
            height: 151px;
            width: 100%;
            //border: 1px solid #f1f1f1;
            overflow: hidden;
            img {
              width: 100%;
            }
          }
          p {
            //文章内容
            width: 100%;
            //height: 42px;
            font-size: @l-font;
            .fontstyle();
            color: #1a1a1a;
            margin: @xl-font 0 15px;
            overflow: hidden;
            display: -webkit-box;
            // word-wrap: break-word;
            // word-break: break-all;
            // text-overflow: ellipsis;
            // -webkit-box-orient: vertical;
            // //line-clamp: 2;
            // text-overflow: ellipsis;
            // &:clampnum {
            //   line-clamp: 2;
            // }
          }

          h2 {
            //文章标题
            width: 120px;
            height: @s-font;
            font-size: @xs-font;
            margin-bottom: @xs-font;
            .fontstyle();
            color: #515151;
          }
          .mine {
            .indexmine();
          }
        }
      }
      .banner {
        //两个文章过后的banner 滑块展示图
      }
    }
  }
}
</style>
